<template>
    <div>
        <panle title='数据列表' content="私域直播数据列表"></panle>
        <div>
            <el-row :span="12" class="pt20">
                <el-col :span="12">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="formInline.live_group" clearable placeholder="请输入直播组名"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="tableData" style="margin-bottom: 20px;" row-key="live_group" height="700" border stripe
            default-expand-all v-loading="loading">
            <el-table-column prop="start_time" width="180" label="直播时间">
                <template slot-scope="scope">
                    {{ scope.row.one_start_time && scope.row.one_start_time.split(' ')[0] }} ~ {{ scope.row.two_start_time
                        && scope.row.two_start_time.split(' ')[0]}}
                </template>
            </el-table-column>
            <el-table-column prop="live_group" align="center" width="150" label="直播组"></el-table-column>
            <el-table-column prop="one_yaoyue_num" align="center" label="day1邀约数"></el-table-column>
            <el-table-column prop="one_daoke_num" align="center" label="day1到课数"></el-table-column>
            <el-table-column align="center" label="day1到课率">
                <el-table-column width="180" align="center" prop="one_daoke_rate" label="day1到课数/day1邀约数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="one_undaoke_num" align="center" label="day1未到课数">
                <template slot-scope="scope">
                    {{ scope.row.one_yaoyue_num - scope.row.one_daoke_num }}
                </template>
            </el-table-column>
            <el-table-column prop="two_yaoyue_num" align="center" label="day2邀约数"></el-table-column>
            <el-table-column prop="two_daoke_num" align="center" label="day2到课数"></el-table-column>
            <el-table-column align="center" label="day2到课率">
                <el-table-column width="180" align="center" prop="two_daoke_rate" label="day2到课数/day2邀约数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="two_undaoke_num" align="center" label="day2未到课数">
                <template slot-scope="scope">
                    {{ scope.row.two_yaoyue_num - scope.row.two_daoke_num }}
                </template>
            </el-table-column>
            <el-table-column prop="live_deal_num" align="center" label="直播间到课成交数"></el-table-column>
            <el-table-column align="center" label="直播间到课成交率">
                <el-table-column width="200" align="center" prop="live_deal_rate" label="到课成交数/day2到课数">
                </el-table-column>
            </el-table-column>
            <el-table-column prop="unlive_deal_num" align="center" label="课后到课成交数"></el-table-column>
            <el-table-column align="center" label="课后到课成交率">
                <el-table-column width="200" align="center" prop="unlive_deal_rate" label="已到课,非直播间成交数/day2到课数">
                </el-table-column>
            </el-table-column>

            <el-table-column prop="total_deal_num" align="center" label="到课总成交数"></el-table-column>
            <el-table-column align="center" label="到课总成交率 ">
                <el-table-column width="200" align="center" prop="total_deal_rate"
                    label="已到课, 总成交数(直播间到课成交+课后到课成交)/day2到课数">
                </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="邀约成交率">
                <el-table-column width="200" align="center" prop="total_yaoyu_chengjiao_lv" label="到课成交+课后成交/day2邀约数">
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看15分钟 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_15_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_15_num1)" @click="liveOnlineClick({'type':'online_15_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_15_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_15_num2)" @click="liveOnlineClick({'type':'online_15_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看30分钟 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_30_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_30_num1)" @click="liveOnlineClick({'type':'online_30_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                    </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_30_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_30_num2)" @click="liveOnlineClick({'type':'online_30_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                    </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看45分钟 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_45_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_45_num1)" @click="liveOnlineClick({'type':'online_45_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                    </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_45_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_45_num2)" @click="liveOnlineClick({'type':'online_45_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                    </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看60分钟 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_60_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_60_num1)" @click="liveOnlineClick({'type':'online_60_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                    </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_60_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_60_num2)" @click="liveOnlineClick({'type':'online_60_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                    </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看75分钟 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_75_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_75_num1)" @click="liveOnlineClick({'type':'online_75_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                    </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_75_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_75_num2)" @click="liveOnlineClick({'type':'online_75_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                    </el-table-column>
            </el-table-column>

            <el-table-column align="center" label="观看75分钟以上 (人数)">
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_gt75_num1"
                    label="day1"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_gt75_num1)" @click="liveOnlineClick({'type':'online_gt75_num1', 'liveId': scope.row.one_id})"></PersButton>
                    </template>
                    </el-table-column>
                <el-table-column
                    width="100"
                     align="center"
                    prop="online_gt75_num2"
                    label="day2"
                    >
                    <template slot-scope="scope">
                        <PersButton type="text" perms="live:stat:orderInfo" :label="String(scope.row.online_gt75_num2)" @click="liveOnlineClick({'type':'online_gt75_num2', 'liveId': scope.row.two_id})"></PersButton>
                    </template>
                    </el-table-column>
            </el-table-column>

            
            <el-table-column prop="no_pay_num" align="center" label="未支付数">
                <template slot-scope="scope">
                    <PersButton type="text" perms="live:order:index" :label="String(scope.row.no_pay_num)"
                        @click="handleJumpClick(scope.row)"></PersButton>
                </template>
            </el-table-column>
            <el-table-column prop="handle" align="center" fixed="right" width="150" label="操作">
                <template slot-scope="scope">
                    <PersButton type="text" perms="live:stat:day2NotDaoke" label="未参加day2直播名单" @click="Day2LiveNotInNum({'liveDay1': scope.row.one_id, 'liveDay2': scope.row.two_id})"></PersButton>
                    <PersButton type="text" perms="live:stat:sales" label="销售数据" @click="handleClick(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    liveStatList,
} from '@/api/live/manager'

export default {
    name: 'Live-Index',
    data() {
        return {
            loading: false,
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
            },
            pageSizes: [10, 50, 100, 200],
            total: 0,
            tableData: [],
            formInline: { live_group: '' },


        }
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            this.loading = true;
            let param = {
                ...this.pageInfo,
                "live_group": this.formInline.live_group
            }
            const { data = [], code = 0 } = await liveStatList(param)
            if (code === 200) {
                this.tableData = data?.list;
                this.total = data?.total;
            }
            this.loading = false;
        },
        handleClear() {
            this.formInline.live_group = ''
            this.init()
        },
        serach() {
            this.init();
        },
        handleSizeChange: function (e) {
            this.pageInfo.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.pageInfo.pageNumber = e;
            this.init();
        },
        handleClick({ live_group = '' }) {
            if (live_group === '' || live_group === null) {
                this.$message.warning('请选择直播组')
                return
            }
            // 查看销售统计
            this.$router.push({
                path: `/live/stat/sales?live_group=${live_group}`
            })
        },
        handleJumpClick({ one_id = 0, two_id = 0, no_pay_num = 0 }) {
            if (no_pay_num > 0) {
                const liveId = [];
                if (one_id) {
                    liveId.push(one_id)
                }
                if (two_id) {
                    liveId.push(two_id)
                }
                const params = {
                    liveId,
                    state: '0',
                    signin_status: 2
                }
                sessionStorage.setItem('live-stat', JSON.stringify(params))
                this.$router.push({
                    name: 'Order',
                    params
                })
            }
        },
        handleJumpClick({one_id=0, two_id=0, no_pay_num =0}){
            if(no_pay_num > 0){
                const liveId = [];
                if(one_id){
                    liveId.push(one_id)
                }
                if(two_id){
                    liveId.push(two_id)
                }
                const params = {
                    liveId,
                    state: '0',
                    signin_status:2
                }
                sessionStorage.setItem('live-stat', JSON.stringify(params))
                this.$router.push({
                    name: 'Order',
                    params
                })
            }
        },
        liveOnlineClick: function (e) {
            this.$router.push({
                path: '/live/livedata/orderInfo',
                query: {
                    liveId: e.liveId,
                    type: e.type
                },
            })
        },
        Day2LiveNotInNum: function (e) {
            if (e.liveDay1 === '' || e.liveDay1 === null) {
                this.$message.warning('暂无第一场直播')
                return
            }
            if (e.liveDay2 === '' || e.liveDay2 === null) {
                this.$message.warning('暂无第二场直播')
                return
            }
            this.$router.push({
                path: '/live/livedata/day2NotDaoke',
                query: {
                    liveDay1: e.liveDay1,
                    liveDay2: e.liveDay2
                },
            })
        }

    }
}

</script>

<style lang="scss">
@import "@/assets/css/common.scss";

.el-select .el-input {
    width: 200px;
}
</style>
